import React, {FC, useCallback, useEffect, useMemo, useRef, useState} from "react";
import {Button, Input} from "antd";
import "./css/InputLocal.less";
import {coreDispatch} from "../../utils/StoreUtil.tsx";
import InputLocalModal from "./InputLocalModal.tsx";
import {useTranslation} from "react-i18next";
import Config from "../../Config.tsx";
import {getItem} from "../../services/LocalDataService.tsx";
import {isObject} from "../../utils";
import {defaultLanguage} from "../../../i18n/i18n.tsx";
import GlobalIcon from "../../global/GlobalIcon.tsx";

const localKey: any = {
    zh: "Cn",
    en: "En",
    pt: "Pt",
}

interface InputLocalProps {
    id: string,
    mode: "Input" | "TextArea",
    value: string,
    disabled: boolean,
    onChange: Function,
    comProps: any,
    ds: any
}

const InputLocal: FC<InputLocalProps> = (props) => {
    const {t} = useTranslation();

    let inputId = props.id.replace(/nasme/g, "name");

    const localValueRef = useRef({});
    const valueRef = useRef({});
    const [value, setValue] = useState<string>();

    useEffect(() => {
        const {ds = {}}: { ds?: any } = props;
        let newValue: any = props.value || ds.text;
        defaultLanguage.forEach((key: string) => {
            localValueRef.current[key] = ds[key] || "";
        });
        if (isObject(newValue)) {
            newValue = newValue[inputId];
        }
        setValue(newValue);
    }, [props.ds]);

    const handleChange: Function = useCallback((e: any) => {
        setValue(e.target.value);
        let local: string = getItem(Config.localLang);
        let values: any = e.target.value ? {} : null;
        if (values) {
            values = {
                [inputId + localKey[local]]: e.target.value,
                ...valueRef.current,
                [inputId]: e.target.value
            }
        }
        props.onChange && props.onChange(values);
    }, [props.onChange, props.id]);

    const handleLocalInput: Function = useCallback(() => {
        const {ds = {}}: { ds?: any } = props;
        let local: string = getItem(Config.localLang);
        coreDispatch("modalReducer/createModal", {
            key: "localInput" + props.id,
            modalProps: {
                title: t("localInput"),
                width: 400,
            },
            component: InputLocalModal,
            comProps: {
                ...ds,
                ...localValueRef.current,
                [local]: localValueRef.current[local] || value,
                disabled: props.disabled
            },
            onFinish: (result: any) => {
                if (result.data) {
                    localValueRef.current = result.data;
                    let values: any = {
                        [inputId]: value
                    };
                    for (let key: string in result.data) {
                        values[inputId + localKey[key]] = result.data[key];
                    }
                    valueRef.current = values;
                    props.onChange && props.onChange(values);
                }
            }
        })
    }, [value, props.id, props.onChange, props.disabled]);

    const InputLocal = useMemo(() => {
        const {mode = "Input", comProps = {}}: { mode: "Input" | "TextArea", comProps: any } = props;
        const params: any = {
            ...comProps,
            className: "sf_core_local_input_box",
            value: value,
            disabled: props.disabled,
            onChange: handleChange
        };
        const Com: any = mode === "Input" ? Input : Input.TextArea;
        return (
            <div className="sf_core_local_input">
                <Com {...params}/>
                <Button className="sf_core_local_input_btn"
                        onClick={handleLocalInput}
                        icon={<GlobalIcon name="icon-multilingual"/>}/>
            </div>
        )
    }, [props, value]);

    return (InputLocal);
};

export default React.memo(InputLocal);